<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Document</title>

    <link rel="stylesheet" href="../../css/setting/side.css">
    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../css/setting/message.css">

    <link rel="stylesheet" href="../../css/setting/mail.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../js/public/jquery-3.3.1.js"></script>
</head>
<style>
    .install-left ul li{
    color:#666;
    }
    </style>
<body>
       
    <div class="install-content" >
        <div class="install-left">
            <ul>
                <li><span class="circle"></span><a href="./commission-install.html"></a>佣金设置</li>
                <li><span class="circle"></span><a href="./other-install.html"></a>其他设置</li>
                <li><span class="circle"></span><a href="./message.html"></a>短信模块</li>
                <li class="active"><span class="circle"></span><a href="./mail.html"></a>邮件模板</li>
            </ul>
        </div>
        <div class="install-right">

            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 10px;">
                <button data-method="notice" class="layui-btn" style="border-radius:8px;background: #2d528f;width: 120px;">新增模板</button>
            </div>

            <!-- 表格部分 -->
            <div class="rl-table">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>

    </div>

    <!-- 新增模板弹框 -->
    <form action="" class="noticeForm layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">邮件签名</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发送场景</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">用户注册</option>
                    <option value="1">用户注册</option>
                    <option value="2">用户注册</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮件类型</label>
            <div class="layui-input-block">
                <input type="radio" name ='mail' value="HTML邮件" title="HTML邮件" checked>
                <input type="radio" name ='mail' value="纯文本邮件" title="纯文本邮件">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮件内容</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
    </form>

    <!-- 编辑按钮弹框内容 -->
    <form action="" class="edit_cont layui-form">
      <div class="layui-form-item">
          <label class="layui-form-label">邮件签名</label>
          <div class="layui-input-block">
              <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off"
                  class="layui-input">
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">发送场景</label>
          <div class="layui-input-block">
              <select name="city" lay-verify="required">
                  <option value=""></option>
                  <option value="0">用户注册</option>
                  <option value="1">用户注册</option>
                  <option value="2">用户注册</option>
              </select>
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">邮件类型</label>
          <div class="layui-input-block">
              <input type="radio" name ='mail' value="HTML邮件" title="HTML邮件" checked>
              <input type="radio" name ='mail' value="纯文本邮件" title="纯文本邮件">
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">邮件内容</label>
          <div class="layui-input-block">
              <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off"
                  class="layui-input">
          </div>
      </div>
  </form>
    <script type="text/html" id="barDemo">
        <a style="color:#2d528f;margin-right: 30px;" lay-event="detail" class="look">编辑</a>
        <a style="color:#ff0000;" lay-event="del">删除</a>
      </script>
    <script src="../../layui/layui.js"></script>
    <script src='../../js/setting/setting.js'></script>
    

    <script>
        layui.use(['table', 'laypage', 'layer', 'form'], function () {
            var table = layui.table, //表格
                laypage = layui.laypage, //分页
                $ = layui.jquery, //弹框
                layer = layui.layer,
                form = layui.form //表单
// 表格数据
table.render({
                elem: '#test'
                    //      , url: '/demo/table/user/'
                    ,
                skin: 'nob',
                width: '100%'
                    //        ,limits:[5,10,20,50]
                    ,
                cols: [
                    [{
                        type: 'checkbox'
                    }, {
                        field: 'id',
                        title: 'ID',
                        minWidth: 100,
                        unresize: true
                    }, {
                        field: 'scene',
                        title: '应用场景',
                        minWidth: 150,
                        unresize: true
                    }, {
                        field: 'autograph',
                        title: '邮件签名',
                        minWidth: 150,
                        unresize: true
                    }, {
                        field: 'template',
                        title: '邮件模板',
                        minWidth: 150,
                        unresize: true
                    } ,{
                        field: 'content',
                        title: '发送邮件的内容',
                        minWidth: 200,
                        unresize: true
                    },{
                        field: 'modifyTime',
                        title: '修改时间',
                        minWidth: 180,
                        unresize: true,
                        sort: true
                    }, {
                        field: 'operate',
                        title: '操作',
                        minWidth: 130,
                        toolbar: '#barDemo',
                        unresize: true,
                        fixed: 'right'
                    }]
                ],
                data: [{
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    },{
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    },{
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    },{
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    },{
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }, {
                        "id": "01",
                        "scene": "用户注册",
                        "autograph": "邮件签名",
                        "template":123456,
                        "content": "邮件验证码不要泄露给他人",
                        "modifyTime": "2018.01.01 18:00:00",
                    }],
                page: true
            });

            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.open({
                    type: 1,
                    title: '信息',
                    closeBtn: 1,
                    move:false,
                    area: '710px;',
                    shade: 0,
                    id: 'LAY_layuipro', //设定一个id，防止重复弹出
                    btn: ['提交', '重置'],
                    btnAlign: 'c',
                    moveType: 1, //拖拽模式，0或者1
                    content: $('.edit_cont'),
                    success: function () {
                        
                    }
                });
                } else if (obj.event === 'del') {
                    layer.open({
                        type: 0,
                        id: 'turnDown' //防止重复弹出
                            ,
                        area: ['400px !important', '220px !important'],
                        title: "删除",
                        content: '<p style="font-size: 16px;height: 40px;line-height: 40px">是否确认 删除?</p>',
                        btn: ['确定', '取消'],
                        btnAlign: 'r' //按钮对齐方式
                            ,
                        shade: 0,
                        shadeClose: true,
                        move: false,
                        resize: false,
                        yes: function () {
                            layer.closeAll();
                            // layer.msg("成功删除")
                        },
                        btn2: function () {
                            layer.closeAll();
                        }
                    });
                }
            });

            //触发事件
            var active = {
                notice: function () {
                    //新增模板 弹框层
                    layer.open({
                        type: 1,
                        title: '新增模板',
                        closeBtn: 1,
                        move:false,
                        area: '710px;',
                        shade: 0,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['发送'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content: $('.noticeForm'),
                        success: function () {
                            
                        }
                    });
                },
            };
           

            $('#layerDemo .layui-btn').on('click', function () {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

        });
    </script>
</body>

</html>